import React, { useRef, useState, useEffect } from 'react'
import style from './ChangeInfo.module.css'
import axios from 'axios'
import Tip from '../Tip'
export default function ChangeInfo(props) {
    let [tipFlag, changeTipFlag] = useState(false)
    let [tipMsg, changeTipMsg] = useState('')
    let [username, changeUsername] = useState('')
    let [email, changeEmail] = useState('')
    let [telephone, changeTelephone] = useState('')
    let [QQ, changeQQ] = useState('')
    let [avatar, changeAvatar] = useState('/public/img/defaultAvatar/avatar.png')
    useEffect(() => {
        if (props.userInfo) {
            changeUsername(props.userInfo.username)
            changeEmail(props.userInfo.email)
            changeTelephone(props.userInfo.telephone)
            changeQQ(props.userInfo.QQ)
            if (props.userInfo.avatar != '') {
                changeAvatar(props.userInfo.avatar)
                changeUrl(props.userInfo.avatar)
            }
        }
    }, props.userInfo)
    useEffect(() => {
        let timer = setTimeout(() => {
            changeTipFlag(false)
        }, 1500);
        return () => { clearTimeout(timer) }
    }, [tipFlag])
    let [newUsername, changeNewUsername] = useState('')
    let [newTelephone, changeNewTelephone] = useState('')
    let [newQQ, changeNewQQ] = useState('')
    let [newAvatar, changeNewAvatar] = useState('')
    let [usernameFlag, changeUsernameFlag] = useState(true)
    let [telephoneFlag, changeTelephoneFlag] = useState(true)
    let [QQFlag, changeQQFlag] = useState(true)
    let file = useRef()
    let [url, changeUrl] = useState('/public/img/defaultAvatar/avatar.png')
    let selectAvatar = () => {
        changeUrl(window.URL.createObjectURL(file.current.files[0]))
    }
    let usernameInput = (e) => {
        let reg = /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$/
        if (reg.test(e.target.value)) {
            changeNewUsername(e.target.value)
            changeUsernameFlag(true)
        } else {
            changeUsernameFlag(false)
        }
    }
    let telephoneInput = (e) => {
        let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (reg.test(e.target.value)) {
            changeNewTelephone(e.target.value)
            changeTelephoneFlag(true)
        } else {
            changeTelephoneFlag(false)
        }
    }
    let QQInput = (e) => {
        let reg = /[1-9][0-9][4,9]/
        if (reg.test(e.target.value)) {
            changeNewQQ(e.target.value)
            changeQQFlag(true)
        } else {
            changeQQFlag(false)
        }
    }
    let avatarInput = (e) => {
        changeNewAvatar(e.target.files[0])
    }
    let submit = async () => {
        if (newUsername == '' && newTelephone == '' && newQQ == '' && newAvatar == '') {
            changeTipFlag(true)
            changeTipMsg('未进行任何修改操作')
        } else if (usernameFlag && telephoneFlag && QQFlag) {
            let fd = new FormData()
            fd.append('username', newUsername)
            fd.append('telephone', newTelephone)
            fd.append('QQ', newQQ)
            fd.append('avatar', newAvatar)
            let res = await axios.post('/changePersonal', fd)
            if (res.data.code == 202) {
                window.location.href = "/personal"
            }
        } else {
            changeTipFlag(true)
            changeTipMsg('请检查输入内容')
        }
    }
    return (
        <div>
            <div className={style.bigBox}>
                <div className={style.fieldset}>
                    <div className={style.leftBox}>
                        <div className={style.username}>
                            <div>
                                <span>用户名：</span>
                                {
                                    usernameFlag ? <input className={style.input} type="text" placeholder={username} onChange={(e) => { usernameInput(e) }} />
                                        : <input className={style.inputError} type="text" placeholder={username} onChange={(e) => { usernameInput(e) }} />
                                }
                                {
                                    usernameFlag ? '' : <span className={style.errorTip}>非法格式</span>
                                }
                            </div>
                        </div>
                        <div className={style.email}>
                            <div>
                                <span>邮箱：</span>
                                <input className={style.input} type="text" placeholder={email} disabled />
                            </div>
                        </div>
                        <div className={style.tel}>
                            <div>
                                <span>联系电话：</span>
                                {
                                    telephoneFlag ? <input className={style.input} type="text" placeholder={telephone} onChange={(e) => { telephoneInput(e) }} />
                                        : <input className={style.inputError} type="text" placeholder={telephone} onChange={(e) => { telephoneInput(e) }} />
                                }
                                {
                                    telephoneFlag ? '' : <span className={style.errorTip}>无效手机号</span>
                                }
                            </div>
                        </div>
                        <div className={style.qq}>
                            <div>
                                <span>QQ：</span>
                                {
                                    QQFlag ? <input className={style.input} type="text" placeholder={QQ} onChange={(e) => { QQInput(e) }} />
                                        : <input className={style.inputError} type="text" placeholder={QQ} onChange={(e) => { QQInput(e) }} />
                                }
                                {
                                    QQFlag ? '' : <span className={style.errorTip}>无效QQ号</span>
                                }
                            </div>
                        </div>
                    </div>
                    <div className={style.rightBox}>
                        <label htmlFor="changeImage">
                            <img src={url} alt="" />
                        </label>
                        <input ref={file} onInput={(e) => { selectAvatar(); avatarInput(e) }} id="changeImage" type="file" />
                    </div>
                    <div className={style.submit}>
                        <div>
                            <button onClick={() => { submit() }}>保存设置</button>
                        </div>
                    </div>
                </div>
            </div>
            {
                tipFlag ? <Tip msg={tipMsg}></Tip> : ''
            }
        </div>
    )
}
